ActiveReports 10
Tracing Layers
ActiveReports 10 > ActiveReports User Guide > Concepts > Page Report/RDL Report Concepts > Layers > Tracing Layers

In Page Reports and Rdl reports, you can trace the layout of a pre-printed form to a pixel perfect accuracy using Layers.

This walkthrough illustrates how you can trace data fields accurately from a scanned image of a boarding pass. These steps show the results on a Page Report but are applicable to Rdl Reports also.

Note: Right-click and save the image below in your project folder before starting the walkthrough.


The walkthrough is split up into the following activities:

When you complete this walkthrough you get a layout that looks similar to the following at design time and at runtime.

Design Time Layout


Runtime Layout


Adding an ActiveReport to a Visual Studio project

  1. In Visual Studio, create a new Windows Forms Application project.
  2. In the Solution Explorer window, right-click Form1, and rename it to MainForm.
  3. From the Project menu, select Add New Item.
  4. In the Add New Item dialog that appears, select ActiveReports 10 Page Report and in the Name field, rename the file to Boarding.
  5. Click the Add button to open a new Page Report in the designer.
See Adding an ActiveReport to a Project for information on adding different report layouts.

Connecting the report to an XML data source

  1. From the Solution Explorer, open Boarding.rdlx created earlier.
  2. In the Report Explorer, right-click the Data Sources node and select Add Data Source or select Data Source from the Add button dropdown.
  3. In the Report Data Source Dialog that appears, select the General page and in the Name field, enter a name like CustomDS.
  4. In the Type drop down to select a data provider, choose Xml Provider.
  5. In the connection string section, add the following custom data to your project.
    Xml
    Copy Code
     XmlData =
    
    <Flight ID="31">
    <Passengers>
    <Passenger>
          <PassengerName>Maria Anders</PassengerName>
    <Seat>23A</Seat>
    <Tracking>2322- 030-0074321</Tracking>
    </Passenger>
        <Passenger>
    <PassengerName>Ana Trujillo</PassengerName>
    <Seat>18E</Seat>
    <Tracking>2322- 030-0074343</Tracking>
    </Passenger>
        <Passenger>
    <PassengerName>Antonio Moreno</PassengerName>
    <Seat>25A</Seat>
    <Tracking>6722- 034-6784349</Tracking>
    </Passenger>
        <Passenger>
    <PassengerName>Christina Berglund</PassengerName>
    <Seat>14B</Seat>
    <Tracking>5678- 543-6784349</Tracking>
    </Passenger>
    <Passenger>
    <PassengerName>Thomas Hardy</PassengerName>
    <Seat>28F</Seat>
    <Tracking>9834- 413-6784569</Tracking>
    </Passenger>
    </Passengers>
    </Flight>
  6. Click OK to close the dialog box.

Adding a dataset

  1. In the Report Explorer, right-click the data source created in the previous step and select Add Data Set or select Data Set option from the Add button dropdown.
  2. In the DataSet Dialog that appears, select the General page and enter the name of the dataset as BoardingData.
  3. On the Query page, select Text under Command Type and enter the following XML path into the Query text box to access the data of each passenger.
    //Passenger
  4. On the Fields page, enter the values from the table below to create fields for your report. Values for XML data fields must be a valid XPath expression.
    Field Name Type Value
    Tracking Database Field Tracking
    PassengerName Database Field PassengerName
    Seat Database Field Seat
  5. Click OK to close the dialog. Your data set and queried fields appear as nodes in the Report Explorer.

See Adding a DataSet for more information on adding dataset to a data source.

Creating a report layout on different layers

  1. In the LayerList window, click the icon to add a new Layer to the report. Notice that a default Layer is already added in the Layer List.
  2. Select Layer1 to make it the Active Layer, and from the Properties window, change the Layer Name to ImgLayer.
  3. In the Layer List window, check the Lock check-box to lock ImgLayer to make sure the image being traced is not modified or changed by mistake.
  4. In the Layer List window,click the Send To Back button to move ImgLayer behind the Default Layer.
  5. In the LayerList window, select Default to make it the Active Layer.
  6. From the Properties window, set the DesignerTransparency of the Default Layer to 0.5 to display the scanned image to be placed on ImgLayer in the background.
  7. From the toolbox, drag a List data region onto the design surface of the report.
  8. In the Properties window of the List data region set the following values.
    Property Name Values
    DataSetName BoardingData
    FixedSize Width: 6.27in
    Height: 3in
    Location Left: 0in
    Top: 0.125in
    Size Width: 6.27in
    Height: 2.87in
  9. In the Report Explorer window, right-click the Embedded Images node and select Add Embedded Image.
  10. In the Open dialog box that appears, browse to the project folder location and select the BoardingPass.jpg image you saved earlier.
  11. Click Open to embed the image in your project.
  12. From the Report Explorer, drag the embedded BoardingPass image onto the List data region and set the properties as described in the following table.
    Property Name Property Value
    LayerName ImgLayer
    Location 0in, 0.125in
    Size 6.27in, 2.875in
  13. From the Report Explorer, drag the following fields onto the List data region and set the following properties.
    Field Name Property Values
    PassengerName

    LayerName: Default

    Location: 2.91in, 0.35in

    Size: 1.375in, 0.25in

    PassengerName

    LayerName: Default

    Location: 0.15in, 0.9in

    Size: 1.37in, 0.25in

    PassengerName

    LayerName: Default

    Location: 4.5in, 0.9in

    Size: 1.25in, 0.25in

    Tracking

    LayerName: Default

    Location: 0.15in, 2.19in

    Size: 1.5in, 0.25in

    Seat

    LayerName: Default

    Location: 4.5in, 1.45in

    Size: 1in, 0.375in

    Font > FontSize: 22pt

  14. In the Layer List window, select the Default Layer and then the ImgLayer and change their TargetDevice property to Screen from the Properties window. See View, Export or Print Layers for more information.

Viewing the report

OR

Go to Top
See Also

Concepts